<template>
    <div>
        <TopBar title="工单详情" iconshow></TopBar>
        <van-form @submit="onSubmit()">
            <van-field
                v-model="sheetId"
                name="厂线号"
                label="厂线号"
                readonly
            />
            <van-field
                v-model="line"
                name="厂线号"
                label="厂线号"
                :readonly="readonly"
            />
            <van-field
                v-model="device"
                name="设备号"
                label="设备号"
                :readonly="readonly"
            />
            <van-field
                v-model="submitor"
                name="提交者工号"
                label="提交者工号"
                :readonly="readonly"
            />
            <van-field
                v-model="desp"
                name="工单描述"
                label="工单描述"
                :readonly="readonly"
            />
            <van-field
                v-model="status"
                name="工单状态"
                label="工单状态"
                readonly
            />
            <van-field
                v-model="type"
                name="工单类型"
                label="工单类型"
                readonly
            />
        </van-form>

        <!--:loading="isloading"-->
        <el-button type="primary" v-if="(role===0 || role === 1) && readonly" @click="editSheet">重新编辑</el-button>
        <el-button type="primary" v-if="(role===0 ||role ===1) && !readonly" @click="postSheet">提交</el-button>

        <!--状态更改按钮-->
        <el-button type="primary" v-if="role===2 && (apiData.form.status<4 && apiData.form.status>1)"
                   @click="updateStatus">完成{{' '+ status}}</el-button>
    </div>
</template>

<script>
import TopBar from "@/components/TopBar";
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "sheetForm",
    components: {
        TopBar
    },
    data() {
        return {
            role: null,  //monitor
            isloading: false,
            readonly: true,

            apiData:[],
            sheetId: '',
            line: '',
            device: '',
            submitor: '',
            desp: '',
            status: '',   //工单状态
            type: '',  //工单类型
        };
    },
    methods: {
        getData(){
            const _this = this;
            this.$axios({
                method: 'get',
                url: `http://47.97.219.99:8018/cloudForm/getFormById/${_this.sheetId}`,
            }).then((res) => {
                // console.log('res', res);
                // console.log('res.data', res.data);
                // console.log('res.data.data', this.$qs.parse(res.data.data));
                this.apiData = this.$qs.parse(res.data.data);  //坑：res.data才是postman中显示出来的
                this.sheetId = this.apiData.id;
                this.line = this.apiData.form.line;
                this.device = this.apiData.form.device;
                this.submitor = this.apiData.form.submitor;
                this.desp = this.apiData.form.desp;
                this.type = this.apiData.form.type
                // console.log(typeof this.apiData.form.status, this.apiData.form.status)
                switch (Number(this.apiData.form.status)){
                    case 0:
                        this.status = '待分配'
                        break
                    case 1:
                        this.status = '待确认'
                        break
                    case 2:
                        this.status = '处理中'
                        break
                    case 3:
                        this.status = '待验证'
                        break
                    case 4:
                        this.status = '已完成'
                        break
                }
                switch (this.apiData.form.type){
                    case 0:
                        this.type = '普通提交'
                        break
                    case 1:
                        this.type = '异常告警'
                        break
                }
            }).catch((err) => {
                console.log('获取工单数据时错误：' + err);
            })
        },

        editSheet(){
            this.readonly = false;
        },

        postSheet(){
            this.readonly = true;

            var newForm = this.apiData.form;
            newForm.line = this.line;
            newForm.device = this.device;
            newForm.submitor = this.submitor;
            newForm.desp = this.desp;
            this.$axios({
                method: 'put',
                url: 'http://47.97.219.99:8018/cloudForm/updateFormById',
                // data: data,
                params: {  //key不是
                    form: JSON.stringify(newForm),
                    id: this.sheetId
                },
                headers: {'content-type': 'x-www-form-urlencoded'},
            }).then( res => {
                // if(res.data.ok) console.log("更新成功")//
            }).catch( err => {
                console.log('更新失败', err)
            })

            //更新之后刷新页面
            this.$router.push('/etc')
        },

        updateStatus(){
            this.apiData.form.status++;
            this.postSheet();
        }
    },
    mounted() {
        // console.log(this.$route.query)
        this.role = Number(sessionStorage.role)
        this.sheetId = this.$route.query.sheetId;
        this.getData();
        this.role = Number(sessionStorage.role);
    },
}
</script>

<style scoped>

</style>
